<template>
  <div class="footer">
    <ul class="links">
      <li>
        <a-dropdown :trigger="['click']" placement="topLeft" v-model="winVisible" :overlayStyle="{zIndex:'11000000'}">
          <img class="win" src="@/assets/img/win.png" alt="" srcset="" @click="btnClick(0)" @blur="btnClick(0)">
          <footer-drawer slot="overlay" :winVisible.sync="winVisible" />
        </a-dropdown>
      </li>
      <li class="tabs" @mouseover="hover=index" @mouseleave="hover=''" v-for="(item,index) in iframe" :key="index" @click="btnClick(1,index)">
        <img :src="item.icon||'http://www.winfoc.com/windows_test/static/images/common/ico.png'" alt="">
        <span style="user-select:none;font-size:13px;">{{item.title|subStr}}</span>
        <a-icon class="tabs-close" type="close" :style="{color:hover===index?'unset':'transparent'}" @click.stop="btnClick(2,index)"/>
      </li>
    </ul>
  </div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
import FooterDrawer from '@/layouts/footer/FooterDrawer.vue'
export default {
  name: 'PageFooter',
  props: ['linkList','show'],
  components: {FooterDrawer},
  computed: {
    ...mapState('window', ['iframe'])
  },
  data(){
    return {
      hover: '',
      winVisible:false,
    }
  },
  filters:{
    subStr(str){
      return str.slice(0,4);
    }
  },
  methods: {
    ...mapMutations('window', ['open', 'min', 'restore', 'destroy']),
    btnClick(type,index){
      switch(type){
        case 0:
          this.$emit('update:show', !this.show)
          break;
        case 1:
          if(this.iframe[index].status){
            this.min(this.iframe[index].id)
          }else{
            this.restore(this.iframe[index].id)
          }
          break;
        case 2:
          this.destroy(this.iframe[index].id)
          break;
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .footer{
    position: fixed;
    bottom: 1px;
    left: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    z-index: 999;
    background: rgba(0,0,0,0.1);
    border-top: 1px solid rgba(0,0,0,0.15);
    color: @text-color;
    .links{
      margin: 0;
      padding: 0;
      list-style: none;
      display: inline-block;
      width: 100%;
      li{
        float: left;
        cursor: default;
        img{
          width:20px;
          height:20px;
          margin-right: 4px;
          display: inline-block;
        }
      }
      .tabs{
        position: relative;
        padding: 0 8px;
        margin-right: 2px;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 110px;
        border: 1px solid rgba(255,255,255,0.4);
        line-height: 30px;
        text-shadow: 0px 0px 0px #fff, 0px 0px 4px @text-color, 0px 0px 5px @text-color;
        color: #fff;
        border-radius: 3px;
        overflow: hidden;
        font-size: 1em;
        box-shadow: 0 0 6px #666;
        padding-left: 4px;
        word-break: break-all;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255,255,255,0.3)', endColorstr='rgba(255,255,255,0)');
        background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0));
        background-image: -moz-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0));
        background-image: -o-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0));
        background-image: -ms-linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0));
        background-image: linear-gradient(top,rgba(255,255,255,0.3),rgba(255,255,255,0));
        -pie-background: linear-gradient(to top,rgba(255,255,255,0.3),rgba(255,255,255,0));
        -khtml-user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
      }
      .tabs:hover{
        background-image: -webkit-linear-gradient(top,rgba(255,255,255,0.5),rgba(255,255,255,0));
        background-image: -moz-linear-gradient(top,rgba(255,255,255,0.5),rgba(255,255,255,0));
        background-image: -o-linear-gradient(top,rgba(255,255,255,0.5),rgba(255,255,255,0));
        background-image: -ms-linear-gradient(top,rgba(255,255,255,0.5),rgba(255,255,255,0));
        background-image: linear-gradient(top,rgba(255,255,255,0.5),rgba(255,255,255,0));
        -pie-background: linear-gradient(to top,rgba(255,255,255,0.5),rgba(255,255,255,0));
      }
      .tabs-close{
        position: absolute;
        font-size: 12px;
        top: 10px;
        right: 10px;
        cursor: pointer;
        color: @text-color;
      }
      .win{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-top: -16px;
        margin-left: 4px;
        margin-right: 6px;
        cursor: pointer;
        background-color: fade(@primary-color, 80%);
        padding: 6px;
      }
    }
  }
</style>
